<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="文件类别">
          <el-input v-model="queryParams.fileCategory" placeholder="请输入文件类别" clearable></el-input>
        </el-form-item>
        <el-form-item label="文件编号">
          <el-input v-model="queryParams.fileNumber" placeholder="请输入文件编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="文件名称">
          <el-input v-model="queryParams.fileName" placeholder="请输入文件名称" clearable></el-input>
        </el-form-item>
        <el-form-item class="search-buttons">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table 
        v-loading="loading" 
        :data="fileList" 
        border 
        stripe
        highlight-current-row
        class="custom-table">
        <el-table-column prop="fileCategory" label="文件类别" align="center" min-width="120"></el-table-column>
        <el-table-column prop="pageNumber" label="页次" align="center" width="80"></el-table-column>
        <el-table-column prop="fileNumber" label="文件编号" align="center" min-width="150"></el-table-column>
        <el-table-column prop="fileName" label="文件名称" align="center" min-width="200"></el-table-column>
        <el-table-column label="操作" align="center" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
            <el-button type="warning" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background>
        </el-pagination>
      </div>
    </el-card>

    <!-- 查看/编辑对话框 -->
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
      width="90%" 
      :close-on-click-modal="false"
      :destroy-on-close="true"
      class="custom-dialog">
      <ffhuishous ref="ffhuishousRef" :mode="dialogMode" :fileInfo="selectedFile" @success="handleSuccess"></ffhuishous>
    </el-dialog>
  </div>
</template>

<script>
import { getFilePage, removeFile } from '@/api/ff'
import ffhuishous from './ffhuishous.vue'

export default {
  name: 'FfhuishousList',
  components: {
    ffhuishous
  },
  data() {
    return {
      loading: false,
      fileList: [],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        fileCategory: '',
        fileNumber: '',
        fileName: ''
      },
      dialogVisible: false,
      dialogTitle: '',
      dialogMode: 'view', // view or edit
      selectedFile: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await getFilePage(this.queryParams)
        this.fileList = res.data.records
        this.total = res.data.total
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.queryParams.current = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        fileCategory: '',
        fileNumber: '',
        fileName: ''
      }
      this.getList()
    },
    handleSizeChange(val) {
      this.queryParams.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    },
    goToDetail(mode, row = null) {
      const query = { mode }
      if (row && row.id) {
        query.id = row.id
      }
      this.$router.push({
        path: '/main/biao/ffhuishous',
        query
      })
    },
    handleAdd() {
      this.goToDetail('edit')
    },
    handleView(row) {
      if (!row || !row.id) {
        this.$message.warning('文件信息不完整')
        return
      }
      this.goToDetail('view', row)
    },
    handleEdit(row) {
      if (!row || !row.id) {
        this.$message.warning('文件信息不完整')
        return
      }
      this.goToDetail('edit', row)
    },
    async handleDelete(row) {
      if (!row || !row.id) {
        this.$message.warning('文件信息不完整')
        return
      }
      try {
        await this.$confirm('确认删除该文件吗？', '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        await removeFile(row.id)
        this.$message.success('删除成功')
        // 如果当前页只有一条数据，且不是第一页，则跳转到上一页
        if (this.fileList.length === 1 && this.queryParams.current > 1) {
          this.queryParams.current--
        }
        this.getList()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }
    },
    handleSuccess() {
      this.dialogVisible = false
      this.selectedFile = null
      this.getList()
      this.$message.success('操作成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.search-card {
  margin-bottom: 20px;
  
  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    .el-form-item {
      margin-bottom: 0;
      margin-right: 0;
      
      &.search-buttons {
        margin-left: auto;
        
        .el-button {
          margin-left: 8px;
          
          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
  }
}

.table-card {
  .custom-table {
    margin: 15px 0;
    
    ::v-deep .el-table__header th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
    }
    
    ::v-deep .el-table__row {
      &:hover {
        td {
          background-color: #f5f7fa !important;
        }
      }
    }
  }
}

.pagination-container {
  padding: 15px 0;
  text-align: right;
}

.custom-dialog {
  ::v-deep .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
  }
  
  ::v-deep .el-dialog__body {
    padding: 20px;
  }
  
  ::v-deep .el-dialog__footer {
    padding: 20px;
    border-top: 1px solid #e8e8e8;
  }
}

@media screen and (max-width: 768px) {
  .search-form {
    .el-form-item {
      width: 100%;
      
      &.search-buttons {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
      }
    }
  }
  
  .custom-table {
    ::v-deep .el-table__body {
      width: 100% !important;
    }
  }
}
</style>
